<template>
  <div>
    <h1>Teleport 示例</h1>
    <p>
      Teleport 是 Vue3 提供的一个内置组件，允许我们将组件模板的一部分"传送"到 DOM
      树的其他位置，而不影响组件的逻辑结构。这在处理模态框、通知、工具提示等需要渲染在特定位置的 UI
      元素时非常有用。
    </p>
    <teleport to="body" :disabled="false" defer>
      <div class="teleport-content">
        <h2>这是 Teleport 渲染的内容</h2>
        <p>它被渲染到了body元素中。</p>
      </div>
    </teleport>
  </div>
</template>

<style scoped lang="scss">
.teleport-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>
